<template>
 <div class="app">
    <header>
      <router-view name="header"/>
    </header>
    <main class="content">
      <!-- <router-view/> -->
       <router-view v-slot="{ Component }">
        <keep-alive include="Home, Category, Cart, Mine" >
          <component :is="Component"></component>
        </keep-alive>
       </router-view>
    </main>
    <footer>
      <router-view name="footer"/>
    </footer>
 </div>
</template>

<script>
export default {
 name: 'App',
 data() {
 return {}
 }
}
</script>

<style>
/* 添加这段样式后，Primary Button 会变成红色 */
:root:root {
  --van-primary-color: red;
  --van-back-top-background:red;
}
  html, body, #app {
    height: 100%;
    width: 100%;
  }
</style>
<style lang="scss" scoped>
  .app {
    display: flex;
    flex-direction: column;
    height: 100%;
    .content{
      flex: 1;
      overflow: auto;
    }
  }
</style>
